<template>
<div>
    <!-- vuex使用先下载，npm i vuex ，然后在main.js中引入import vuex from 'vuex',然后main.js使用插件Vue.use(vuex) -->
    <!-- vue2只能用vuex3的版本，vue3只能用vuex4的版本，我们项目目前是2，你直接npm i vuex是下的4版本，安装不了，所以要npm i vuex@3 -->
<h2 class='name'>当前数字是{{$store.state.sum}}</h2>
<h2 class='name'>当前数字放大十倍是{{$store.getters.bigSum}}</h2>
<select v-model="n">
    <option :value='1'>1</option>
    <option :value='2'>2</option>
    <option :value='3'>3</option>
</select>
<button @click = 'increment'>+</button>
<button @click = 'decrement'>-</button>
<button @click = 'incrementOdd'>当前求和数为奇数再加</button>
<button @click = 'incrementWait'>等一等再加</button>
</div>
</template>

<script>
// vuex里面有个方法叫mapState，翻译过来就是映射状态,映射state中的数据作为计算属性，有点麻烦
import {mapState} from 'vuex'
export default {
    name:'VuexCount',
    data(){
        return {
            //sum:0,  //这个数字先拿走了，放到state里面去
            n:1,   //这是用户选择的数字
            mySum:''
        }
    },
    methods:{
        increment(){
            //  那现在数据就不是那么随便改了
            // 参数是要执行的函数和传过去的值，函数在actions里面
            this.$store.dispatch('jia',this.n)
            // 这里调用dispatch是为了去actions，如果你没有逻辑要处理，没有Ajax要请求，你可以直接commit到mutations，this.$store.commit('函数名',参数)

        },
        decrement(){
       
        },
        incrementOdd(){
            // 如果当前数是奇数我们加一
           
        },
        incrementWait(){
            setTimeout(()=>{
            
            },1000)
        }
    },
   mounted() {

   },
    
}
</script>


<style>
    .name{
        background: lightblue;
    }
</style>